昨天已經完成匯出／匯入，今天要挑戰的是另一個真實世界的痛點 —— 沒有網路時也能寫日記。
畢竟日記是隨時隨地的靈感記錄，不能因為斷網就卡住。
所以今天的目標是把日記系統升級成 PWA 網頁版離線模式，即使沒有網路也能使用，恢復連線後再自動同步。

今日目標

1. PWA 基礎設置

• 新增 manifest.json（名稱、icon、啟動模式）
• 註冊 Service Worker，快取 HTML / JS / CSS / Icon

2. 離線支援

• 使用者斷網時仍能開啟網站
• 新增日記會暫存到 IndexedDB

3. 自動同步

• 網路恢復後，自動讀取 IndexedDB
• 把未同步日記寫入 Firestore
• 用 isSynced 標記避免重複上傳

4. UI 提示

• 網頁顯示「目前為離線模式」
• 上線後顯示「正在同步... → 同步完成」

Prompt

幫我在 React (Firestore + Auth) 的日記網頁加入「PWA 離線模式」  

=== 功能需求 ===  
1) PWA 設定  
   - 新增 manifest.json（app 名稱、icon、display: standalone）  
   - 註冊 Service Worker (sw.js)，快取 HTML、CSS、JS  

2) 離線寫入  
   - 斷網時，日記存到 IndexedDB  
   - 格式：{ id, date, content, sentiment, isSynced: false }  

3) 上線同步  
   - 監聽 `window.addEventListener('online', ...)`  
   - 從 IndexedDB 取出 isSynced=false 的資料 → 寫入 Firestore  
   - 成功後更新 isSynced=true  

4) UI  
   - 離線時顯示「目前為離線模式」  
   - 上線同步時顯示「同步中 → 完成」  

今日驗收 ✅

1. 透過 Service Worker，網頁可以在無網路狀態下正常載入
2. 新增日記後，先存到 IndexedDB（Firestore 不變）
3. 網路恢復後，IndexedDB 中未同步的日記自動上傳 Firestore，Firestore 立即更新，前端 UI 也刷新
4. UI 正確顯示「離線模式」與「同步完成」
   
   

明日預告

Day 21 要邁向真正上線的里程碑 —— 部署
在完成了匯出／匯入與離線模式後，是時候把專案丟到雲端，讓任何地方都能開啟並使用